<template>
    <!-- 职位列表 -->
    <view class="job-items" :class="currentTheme" v-if="jobList.length">
      <view
        class="job-item-container"
        v-for="(item, index) in jobList"
        :key="item.id"

      >
        <!-- 职位卡片与删除按钮的容器 -->
        <view class="job-item-wrapper" 
          v-if="showDelete"
          @touchstart="start($event, index)"
          @touchmove="move($event, index)"
          @touchend="end(index)"
          :style="{transform: `translateX(${getMoveX(item)}px)`, width: showDelete ? 'calc(100% + 80px)' : '100%'}"
        >
          <!-- 职位卡片 -->
          <view class="job-item job-item-with-delete" @click="goToJobDetail(item.id)">
            <view class="job-header">
              <view class="job-name">{{ item.positionName }}</view>
              <view class="salary">{{ item.salary }}</view>
            </view>
            <view class="company-info">
              <text>{{ item.companyName }}</text>
              <text>{{ item.companySize }}</text>
            </view>
            <view class="tags">
              <text
                class="tag"
                v-for="(tag, tagIndex) in (item.positionTagsList || []).slice(0, 3)"
                :key="tagIndex"
              >
                {{ tag }}
              </text>
            </view>
            <view class="contact">
              <view class="contact-left">
                <image
                  class="hr-avatar"
                  :src="item.hrAvatarUrl"
                  mode="aspectFill"
                />
                <text class="contact-name">{{ item.respPerson || 'HR' }}</text>
              </view>
              <text class="contact-city">{{ item.city || '未知城市' }}</text>
            </view>
          </view>
          
          <!-- 删除按钮 -->
          <view class="delete-button-container">
            <DeleteButton @delete="deleteJob(index)" />
          </view>
        </view>
        
        <!-- 不带删除功能的职位卡片 -->
        <view class="job-item-wrapper" v-else>
          <view class="job-item job-item-no-delete" @click="goToJobDetail(item.id)">
            <view class="job-header">
              <view class="job-name">{{ item.positionName }}</view>
              <view class="salary">{{ item.salary }}</view>
            </view>
            <view class="company-info">
              <text>{{ item.companyName }}</text>
              <text>{{ item.companySize }}</text>
            </view>
            <view class="tags">
              <text
                class="tag"
                v-for="(tag, tagIndex) in (item.positionTagsList || []).slice(0, 3)"
                :key="tagIndex"
              >
                {{ tag }}
              </text>
            </view>
            <view class="contact">
              <view class="contact-left">
                <image
                  class="hr-avatar"
                  :src="item.hrAvatarUrl"
                  mode="aspectFill"
                />
                <text class="contact-name">{{ item.respPerson || 'HR' }}</text>
              </view>
              <text class="contact-city">{{ item.city || '未知城市' }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="load-more">
        <text v-if="loadingMore">加载中...</text>
        <text v-else-if="noMore">—— 已加载全部 ——</text>
      </view>
    </view>
</template>

<script>
import DeleteButton from "./DeleteButton.vue";

export default {
  components: {
    DeleteButton
  },
  props: {
    jobList: {
      type: Array,
      default: () => []
    },
    loadingMore: {
      type: Boolean,
      default: false
    },
    noMore: {
      type: Boolean,
      default: false
    },
    showDelete: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      delBtnWidth: 80,  // 删除按钮宽度
      currentTheme: 'theme1' // 添加主题数据
    };
  },
  mounted() {
    // 加载主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    
    // 监听全局主题变化事件
    this.themeChangeHandler = (newTheme) => {
      this.currentTheme = newTheme;
    };
    uni.$on('global-theme-change', this.themeChangeHandler);
  },
  onShow() {
    // 重新加载主题设置，确保主题同步
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
  },
  beforeDestroy() {
    // 移除全局事件监听，防止内存泄漏
    uni.$off('global-theme-change', this.themeChangeHandler);
  },
  methods: {
    goToJobDetail(id) {
      this.$emit('goToJobDetail', id);
    },
    deleteJob(index) {
      // 关闭滑动
      this.setMoveX(this.jobList[index], 0);
      // 触发父组件的删除事件
      this.$emit('deleteJob', index);
    },
    // 安全获取 moveX 属性
    getMoveX(item) {
      return item.moveX || 0;
    },
    // 安全设置 moveX 属性
    setMoveX(item, value) {
      if (item) {
        this.$set(item, 'moveX', value);
      }
    },
    // 滑动逻辑
    start(e, index) {
      // 只有在显示删除功能时才处理滑动
      if (!this.showDelete) return;
      
      this.$set(this.jobList[index], 'startX', e.touches[0].clientX);
      this.$set(this.jobList[index], 'isMoving', true);
      // 关闭其他已打开的删除按钮
      this.jobList.forEach((item, i) => {
        if (i !== index && this.getMoveX(item) < 0) {
          this.setMoveX(item, 0);
        }
      });
    },
    move(e, index) {
      // 只有在显示删除功能时才处理滑动
      if (!this.showDelete || !this.jobList[index].isMoving) return;
      
      const currentX = e.touches[0].clientX;
      const diffX = currentX - this.jobList[index].startX;
      // 限制移动范围
      const moveX = Math.max(
        Math.min(diffX, 0), 
        -this.delBtnWidth
      );
      this.setMoveX(this.jobList[index], moveX);
    },
    end(index) {
      // 只有在显示删除功能时才处理滑动
      if (!this.showDelete) return;
      
      this.$set(this.jobList[index], 'isMoving', false);
      // 判断是否显示删除按钮
      if (this.getMoveX(this.jobList[index]) <= -this.delBtnWidth / 2) {
        this.setMoveX(this.jobList[index], -this.delBtnWidth);
      } else {
        this.setMoveX(this.jobList[index], 0);
      }
    }
  }
}
</script>

<style scoped>
/* 职位项容器 */
.job-item-container {
  position: relative;
  margin-bottom: 10px;
  overflow-x: hidden;
}

/* 职位卡片与删除按钮的容器 */
.job-item-wrapper {
  display: flex;
  width: 100%;
  transition: transform 0.3s ease;
  position: relative;
}

/* 可从原文件中复制对应的样式 */
.job-items {
  padding: 0 10px;
  min-height: calc(100vh - 100px);
}

/* 带删除功能的职位卡片 */
.job-item-with-delete {
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  width: calc(100% - 80px);
}

/* 不带删除功能的职位卡片 */
.job-item-no-delete {
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  width: 100%;
}

/* 删除按钮容器 */
.delete-button-container {
  width: 80px;
  position: relative;
}

/* 公共样式 */
.job-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.job-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary {
  color: #409eff;
  font-size: 16px;
  font-weight: bold;
}

.company-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  gap: 10px;
}

.company-info text:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.contact-left {
  display: flex;
  align-items: center;
}

.hr-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.load-more {
  text-align: center;
  padding: 10px 0;
  color: #666;
}

/* 主题样式 */
/* Theme1 - 蓝色主题 */
.theme1 .job-items {
  background-color: #F8FBFF;
}

.theme1 .job-item-with-delete,
.theme1 .job-item-no-delete {
  background-color: #FFFFFF;
  border: 1px solid #E8F4FD;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.08);
}

.theme1 .job-item-with-delete:hover,
.theme1 .job-item-no-delete:hover {
  border-color: #4A90E2;
  box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.15);
}

.theme1 .job-name {
  color: #2C3E50;
  font-weight: 600;
}

.theme1 .salary {
  color: #4A90E2;
  font-weight: 600;
}

.theme1 .company-info {
  color: #5A6C7D;
}

.theme1 .tag {
  background-color: #E8F4FD;
  color: #4A90E2;
  border: 1px solid #D1E9F6;
}

.theme1 .contact {
  color: #5A6C7D;
}

.theme1 .load-more {
  color: #4A90E2;
}

/* Theme2 - 棕色/米色主题 */
.theme2 .job-items {
  background-color: #FDF8F3;
}

.theme2 .job-item-with-delete,
.theme2 .job-item-no-delete {
  background-color: #FFFBF7;
  border: 1px solid #F5E6D3;
  box-shadow: 0 4rpx 16rpx rgba(160, 82, 45, 0.08);
}

.theme2 .job-item-with-delete:hover,
.theme2 .job-item-no-delete:hover {
  border-color: #A0522D;
  box-shadow: 0 6rpx 20rpx rgba(160, 82, 45, 0.15);
}

.theme2 .job-name {
  color: #3E2723;
  font-weight: 600;
}

.theme2 .salary {
  color: #A0522D;
  font-weight: 600;
}

.theme2 .company-info {
  color: #6D4C41;
}

.theme2 .tag {
  background-color: #F5E6D3;
  color: #A0522D;
  border: 1px solid #E8D5C4;
}

.theme2 .contact {
  color: #6D4C41;
}

.theme2 .load-more {
  color: #A0522D;
}

/* 禁用动画和过渡效果 */
* {
  transition: none !important;
  animation: none !important;
}
</style>